<template>
  <div class="ratingselect">
      <div class="rating-type border-1px">
          <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
          <span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
          <span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
      </div>
      <div @click="toggleContent($event)" class="switch" :class="{'on':onlyContent}">
          <span class="icon-check_circle"></span>
          <span class="text">只看内容的评价</span>
      </div>
  </div>
</template>

<script type='text/ecmascript-6'>
const POSITIVE = 0;
const NEGATIVE = 1;
const ALL = 2;


export default {
  props: {
    ratings:{
        type: Array,
        default() {
            return [];
        },
    },
    selectType: {
        type: Number,
        default: ALL  
    },
    onlyContent: {
        type: Boolean,
        default: false,
    },
    desc: {
        type: Object,
        default() {
            return {
                all: '全部',
                positive: '满意',
                negative: '不满意',
            };
        }
    }  
  }, 
  data () {
    return {
    };
  },
  computed:{
    positives(){
        return this.ratings.filter((rating)=>{
            return rating.rateType===POSITIVE;
        })
    },
    negatives(){
      return this.ratings.filter((rating)=>{
            return rating.rateType===NEGATIVE;
        })  
    }
  },
  methods: {
      select(type,event){
         if(!event._constructed){
             return;
         }
         this.selectType=type
         //向父组件传递事件$dispatch
         this.$dispatch('ratingtype.select',type); 
      },
      toggleContent(event){
        if(!event._constructed){
             return;
        }
        //取反
        this.onlyContent = !this.onlyContent;
        //向父组件传递事件$dispatch
        this.$dispatch('content.toggle',this.onlyContent);

      }
  }
}

</script>
<style lang='stylus' rel='stylesheet/stylus'>
   @import "../../common/stylus/mixin.styl"   
    .ratingselect
      .rating-type
        padding 18px 0
        margin 0 18px
        border-1px(rgba(7,17,27,0.1))
        font-size 0
        .block
          display inline-block
          padding 8px 12px
          margin-right 8px
          border-radius 1px
          color rgb(77, 85, 93)
          font-size 12px
          &.active
            color:#fff
          .count
            font-size 8px
            margin-left 2px
            line-height 16px    
          &.positive
            background rgba(0, 160, 220, 0.2)
            &.active
              background rgb(0, 160, 220)
          &.negative
            background rgba(77, 85, 93, 0.2)
            &.active
             background rgb(77, 85, 93)
      .switch
        padding 12px 18px
        line-height 24px
        border-bottom 1px solid rgba(7, 17, 27, 0.1)
        color rgb(147, 153, 159)
        font-size 0
        &.on
          .icon-check_circle
            color #00c850
        .icon-check_circle
          display inline-block
          vertical-align top
          margin-right 4px
          font-size 24px
        .text
          display inline-block
          vertical-align top
          font-size 12px


</style>